<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :show="show" @click-show="show = !show" :fixed="true" :back="true" color="#fff" title="码上见代表"></uni-navbar></view>

		<!-- <view class="search-view">
			<u-search class="search-input" shape="square" bg-color="#fff" v-model="will.stationName" :show-action="false" @search="search" placeholder="请输入联络站名称"></u-search>
		</view> -->

		<view class="banner"><image class="image" src="/static/img/banner01.png" mode="aspectFill"></image></view>

		<view class="list-box" v-if="tabsList.length > 0">
			<view class="list-info_09">
				<view class="info-item" v-for="(item, index) of tabsList" :key="item.id" @click="navTo('/pagesB/will/site_detail?id=' + item.id)">
					<view class="info-img" v-if="index < 12"><image class="image" :src="`/static/img/site_0${index + 1}.png`" mode="aspectFill"></image></view>
				</view>
			</view>
		</view>
		<u-loadmore status="nodata" v-else />

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import dateTimePicker from '@/components/uni-datetime-picker';
import { mapState } from 'vuex';
export default {
	components: {
		dateTimePicker
	},
	data() {
		return {
			scrollTop: 0,
			show: false,
			tabsCurrent: 0,
			tabsList: [],
			statusMap: {
				0: '所有'
			},
			colorMap: {
				1: '#0099ff',
				2: '#ff9900',
				3: '#19be6b'
			},
			id: '',
			title: '',

			customStyle1: {
				padding: '0 40rpx'
			},
			customStyle2: {
				color: '#E80D1E',
				border: '2rpx solid #E80D1E',
				background: '#fff'
			},

			type: '',
			typeShow: false,
			typeList: [],
			secType: '',
			secTypeShow: false,
			secTypeList: [],

			startTime: '',
			endTime: '',

			siteInfo: '',
			willList: [],
			will: {
				stationFlag: '',
				contacts: '',
				street: '',
				stationName: ''
			},
			loading: 'loadmore'
		};
	},
	onLoad(option) {
		this.loadLogin();
		if (option && option.status) {
			if (option.status == 1) {
				this.tabsCurrent = 1;
			}
			if (option.status == 2) {
				this.tabsCurrent = 2;
			}
		}
		this.loadData();
		// this.loadDict('will_category', 'typeList');
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onReachBottom() {
		if (this.loading == 'loadmore') this.loadData('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		dateRangeSea: {
			get: function() {
				let time = this.startTime + ' - ' + this.endTime;
				if (this.startTime == '' || this.endTime == '') {
					return '';
				} else {
					return time;
				}
			},
			set: function(e) {
				this.startTime = '';
				this.endTime = '';
			}
		},
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;

				this.pageNum = 1;
				this.pageSize = 15;
			} else {
				this.$logout();
			}
		},
		loadDict(type, list) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						value: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		loadData(type = 'add') {
			if (this.loading == 'loading') {
				return false;
			}
			if (type == 'add') {
				if (this.loading == 'nomore') {
					return false;
				}
				this.loading = 'loading';
			} else {
				this.loading = 'loading';
			}
			if (type != 'add') {
				this.pageNum = 1;
			}
			let data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				userId: this.userId,
				clientCode: this.clientCode,
				...this.will
			};
			let url = '/minqingzhitong/msLiaisonStation/list/' + this.pageNum + '/' + this.pageSize;

			this.$request(url, data, {
				load: true
			}).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.tabsList = [];
				}
				this.loading = this.pageNum < Math.ceil(res.data.total / this.pageSize) ? 'loadmore' : 'nomore';
				this.pageNum = this.pageNum + 1;
				this.tabsList = this.tabsList.concat(res.data.records);

				this.loaded = true;
				if (this.tabsList.length <= 0) {
					this.loading = 'nodata';
				} else {
					this.loadDetail(this.tabsList[this.tabsCurrent].id);
				}
			});
		},
		loadDetail(e) {
			this.id = e;
			let data = {
				id: this.id
			};
			let url = '/minqingzhitong/msLiaisonStation/get';

			this.$request(url, data).then((res) => {
				this.willList = res.data.msStationEmployees;
				this.siteInfo = res.data.msLiaisonStation;
			});
		},
		tabsChange(index, id) {
			this.tabsCurrent = index;
			this.loadDetail(id);
		},
		search(e) {
			this.will.stationName = e;
			this.loadData('refresh');
		},
		upper(e) {
			this.loadData('refresh');
		},
		lower(e) {
			if (this.loading == 'loadmore') this.loadData('add');
		},
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e.contactsPhone
			});
		},
		mapTo(e) {
			let geography = e.stationCoordinate.split(',');
			let res = this.$bd09_to_gcj02(geography[0], geography[1]);

			uni.openLocation({
				name: e.stationName,
				address: e.stationAddress,
				latitude: res.lat,
				longitude: res.lng,
				success: () => {
					console.log('success');
				}
			});
			return false;
		},
		navTo(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style lang="scss">
.banner {
	padding: 0;
	height: 320rpx;

	.image {
		width: 750rpx;
		height: 320rpx;
	}
}

.list-view {
	background-color: #fff;
}

.list-box {
	margin-bottom: 130rpx;
	padding: 0 30rpx;
	background-color: #fff;
}

.list-info_09 {
	.info-item {
		margin: 20rpx 0 0;
		padding: 0;
		width: 334rpx;

		&:nth-child(n + 7) {
			width: 100%;
		}
	}

	.info-img {
		.image {
			width: 100%;
			height: 120rpx;
			border-radius: 0;
		}
	}
}

.filter-box {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 998;
	background-color: #fff;
}

.form-box {
	.form-item {
		display: block;
		padding: 0 30rpx;
		border-bottom: 20rpx solid #f5f7fa;
	}
}

.fiexd-btm {
	position: fixed;
	left: 242rpx;
	bottom: 30rpx;
}
</style>
